<template>
  <div class="total-goods">
    <el-card>
      <!-- 查询表单 -->
      <div class="searchForm">
        <span class="label">日期范围</span>
        <!-- 日期选择器 -->

        <el-date-picker
          v-model="date"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          class="date-picker"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <!-- 按钮 -->
        <el-button type="primary" @click="getData" size="small">查询</el-button>
      </div>
      <order-charts id="test"></order-charts>
    </el-card>
  </div>
</template>

<script>
import OrderCharts from './OrderCharts.vue';
export default {
  components: {
    OrderCharts,
  },
}
</script>

<style lang="less" scoped>
.searchForm {
  display: flex;
  align-items: center;
}
.label {
  font-size: 12px;
  color: #666;
}
.date-picker {
  margin: 0 10px;
}
#test {
  margin-top: 30px;
}
</style>